<template>
    <div class="card-box">
        <el-row>
            <el-col :span="24" class="mb20">
                <router-link class="el-button el-button--primary" type="button" tag="button" :to="'/agent_profit/' + $route.params.id9 + '/terminal_products/new'">
                    中国移动
                </router-link>
                <router-link class="el-button el-button--default" type="button" tag="button" :to="'/agent_profit/' + $route.params.id9 + '/terminal_products/new'">
                    中国联通
                </router-link>
                <router-link class="el-button el-button--default" type="button" tag="button" :to="'/agent_profit/' + $route.params.id9 + '/terminal_products/new'">
                    中国电信
                </router-link>
            </el-col>
        </el-row>
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item class="mt_5">
                        <el-input v-model="formInline.user" placeholder="ICCID或者设备名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary">导出</el-button>
                    <el-button type="primary" @click="dialogVisible = true">筛选</el-button>
                    <el-button type="primary" @click="dialogVisible1 = true">销卡</el-button>
                </el-form>
                <el-dialog title="筛选" :visible.sync="dialogVisible" width="40%">
                    <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="运营商：">
                            <el-select v-model="ruleForm.carrier" filterable placeholder="请选择" class="w100" @change="select">
                                <el-option v-for="item in carrier" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户：">
                            <el-select v-model="ruleForm.customer" filterable placeholder="请选择" class="w100" @change="select">
                                <el-option v-for="item in customer" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户业务模式：">
                            <el-select v-model="ruleForm.type" filterable placeholder="请选择" class="w100" @change="select">
                                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="销卡类型：">
                            <el-select v-model="ruleForm.xiaoka" filterable placeholder="请选择" class="w100" @change="select">
                                <el-option v-for="item in xiaoka" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                </el-dialog>
                <el-dialog title="批量销卡" :visible.sync="dialogVisible1" width="40%">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="ICCID号码：" prop="textarea">
                            <el-input type="textarea" :rows="15" placeholder="输入 ICCID 号，多个号码分行间隔" v-model="ruleForm.textarea">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
                    </span>
                </el-dialog>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" label="id" width="40" prop="id">
            </el-table-column>
            <el-table-column label="ICCID" sortable width="200">
                <template slot-scope="scope">
                    <span class="link">{{ scope.row.iccid}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话号码" width="150">
            </el-table-column>
            <el-table-column prop="imsi" label="运营商" width="100">
            </el-table-column>
            <el-table-column prop="customer" label="客户" width="150">
            </el-table-column>
            <el-table-column prop="moshi" label="用户业务模式" width="120">
            </el-table-column>
            <el-table-column prop="status" label="卡状态" width="80">
            </el-table-column>
            <el-table-column prop="carrier_status" label="运营商状态" width="120">
            </el-table-column>
            <el-table-column prop="end_time" label="服务周期结束日" width="120">
            </el-table-column>
            <el-table-column prop="xiao_time" label="预销卡时间" sortable width="120">
            </el-table-column>
            <el-table-column prop="type" label="销卡类型">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    carrier: '',
                    customer: '',
                    type: '',
                    xiaoka: '',
                    textarea: ''
                },
                formInline: {
                    user: ''
                },
                dialogVisible: false,
                dialogVisible1: false,
                carrier: [{
                        value: '选项一',
                        label: '无锡移动'
                    },
                    {
                        value: '选项二',
                        label: '盐城移动'
                    }
                ],
                customer: [{
                        value: '选项一',
                        label: '无锡移动'
                    },
                    {
                        value: '选项二',
                        label: '盐城移动'
                    }
                ],
                type: [{
                        value: '选项一',
                        label: '无锡移动'
                    },
                    {
                        value: '选项二',
                        label: '盐城移动'
                    }
                ],
                xiaoka: [{
                        value: '选项一',
                        label: '无锡移动'
                    },
                    {
                        value: '选项二',
                        label: '盐城移动'
                    }
                ],
                rules: {
                    textarea: [
                        {
                            required: true,
                            message: '请选择ICCID',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .w100 {
        width: 100%;
    }
</style>